<template>  
  <!-- 功能区 -->  
  <view class="functionalArea" v-if="navigation.length >= 1">  
    <swiper  
      class="listbox"  
      :style="{ height: navigation[0].length > [0, 3, 4, 5][type] ? '360upx' : '90px' }"  
      circular="true"  
      interval="3000"  
      duration="1000"  
    >  
      <swiper-item class="list" v-for="(items, index) in navigation" :key="index">  
        <view  
          class="item"  
          :style="{ width: type === 1 ? '33.33%' : type === 2 ? '25%' : '20%' }"  
          v-for="(item, indexs) in items"  
          :key="indexs"  
         	@click.stop="$gotosUrls(item)"
        >  
          <image :src="item.url" mode=""></image>  
          <view class="text">{{ item.name }}</view>  
        </view>  
      </swiper-item>  
    </swiper>  
  </view>  
</template>  
  
<script setup>  
import { ref, watch, computed } from 'vue';  
import {onMounted} from "vue";
const props = defineProps({  
  type: {  
    type: Number,  
    default: 1, // 0: 一排3个, 1: 一排4个, 2: 一排5个  
  },  
  list: {  
    type: Array,  
    default: () => []  
  }  
});  
  
const navigation = ref([]);  
  
const goUrl = (url) => {  
  // 这里假设 $goURL 是个方法，但在 Vue 3 中，我们可能需要直接调用方法或使用全局状态管理  
  // 示例中直接使用 console.log 模拟  
  console.log('Navigating to:', url);  
};  
  
watch(() => props.type, (newType) => {  
  const num = newType === 1 ? 6 : newType === 2 ? 8 : 10;  
  navigation.value = chunkArray(props.list, num);  
});  
  
onMounted(() => {  
  const num = props.type === 1 ? 6 : props.type === 2 ? 8 : 10;  
  navigation.value = chunkArray(props.list, num);  
});  
  
function chunkArray(array, size) {  
  const result = [];  
  for (let i = 0; i < array.length; i += size) {  
    result.push(array.slice(i, i + size));  
  }  
  return result;  
}  
</script>

<style lang="scss" scoped>
	// 功能区
	.functionalArea {
		margin: 30upx 20upx;
		border-radius: 30upx;
		background-color: #fff;
		padding-bottom: 5upx;
    box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, 0.08);
		.swiper {
			overflow: hidden;
			height: 400upx;

			.swiper-item {
				height: 400upx;
				width: 100%;
				overflow: hidden;
			}
		}
		uni-swiper {
			height: auto;
		}
		.listbox {
			width: calc(100% - 40upx);
			// height: 400upx;
			padding: 20upx;

			.list {
				display: flex;
				flex-wrap: wrap;
				justify-content: flex-start;
				height: 400upx;

				.item {
					// width: 20%;
					display: flex;
					flex-direction: column;
					align-items: center;
					// justify-content: center;

					image {
						width: 90upx;
						height: 90upx;
						margin-top: 20upx;
					}

					.text {
						font-weight: bold;
						margin-top: 20upx;
						font-size: 12px;
					}
				}
			}
		}
	}
</style>